import { getRandomColor } from "@/utils/common/index";

/**
 * 初始化地图
 * @param {String} id 渲染区域的id元素
 * @param {Array} center 初始化地图中心点
 * @param {Number} zoom 地图层级
 * @param {Array<Number>} zooms 缩放最小和最大层级范围
 * @returns 返回地图实例
 */
export const InitMap = (
  id,
  center = [118.781513, 32.018791],
  zoom = 11,
  zooms = [3, 19],
  obj
) => {
  const map = new AMap.Map(id, {
    resizeEnable: true,
    expandZoomRange: true,
    center,
    zoom,
    zooms,
    viewMode: "3D",
    ...obj,
    // animateEnable: false,
  });
  new AMap.Geocoder({
    city: "320100",
  });
  return map;
};

/**
 * 添加marker点
 * @param {Map} map 实例地图
 * @param {String} label 移入时显示内容
 * @param {String} img 图片
 * @param {Array} lnglat 经纬度
 * @param {Object} addVal 自定义属性
 * @param {Function} callback 回调函数
 * @returns marker实例
 */
export const addMarker = (map, label, img, lnglat, addVal, callback) => {
  const marker = new AMap.Marker({
    map,
    label,
    icon: new AMap.Icon({
      size: new AMap.Size(35, 48), // 图标尺寸
      image: img, // Icon的图像
      imageSize: new AMap.Size(35, 48), // 根据所设置的大小拉伸或压缩图片
    }),
    position: lnglat,
    offset: new AMap.Pixel(-11, -38),
    ...addVal,
  });
  map.add(marker);
  // setCenter(map, 17, lnglat);
  callback && marker.on("click", callback);
  return marker;
};

/**
 * 添加窗口信息
 * @param {Map} map 实例地图
 * @param {Array} lnglat 经纬度
 * @param {String} content 内容
 */
export const addInfoWindow = (map, lnglat, content) => {
  // 创建 infoWindow 实例
  const infoWindow = new AMap.InfoWindow({
    isCustom: true, //使用自定义窗体
    content,
    offset: new AMap.Pixel(100, -15),
  });
  // 打开信息窗体
  infoWindow.open(map, lnglat);
};

/**
 * 轨迹组件实例
 * @returns Promise
 */
export const InitPathSimplifier = () => {
  return new Promise((resolve, reject) => {
    AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], function (pathSimplifier) {
      resolve(pathSimplifier);
    });
  });
};

/**
 *
 * @param {Map} map 地图实例
 * @param {Number} zIndex 轨迹层级
 * @param {PathSimplifier} PathSimplifier 轨迹实例
 * @returns 轨迹配置
 */
export const confPathSimplifier = (map, zIndex, PathSimplifier) => {
  return new PathSimplifier({
    map,
    zIndex,
    // 巡航路线轨迹列表
    getPath: function (pathData) {
      return pathData.path;
    },
    // hover每一个轨迹点，展示内容
    getHoverTitle: function (pathData, pathIndex, pointIndex) {
      if (pointIndex >= 0) {
        return (
          pathData.name + "，点：" + pointIndex + "/" + pathData.path.length
        );
      }
      return "点数量" + pathData.path.length;
    },
    // 自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档
    renderOptions: {
      renderAllPointsIfNumberBelow: 100, // 绘制路线节点，如不需要可设置为-1
      pathLineStyle: {
        // 轨迹颜色
        lineWidth: 8,
        strokeStyle: "#999",
        // borderWidth: 1,
        // borderStyle: '#d220d2',
        dirArrowStyle: true, // 轨迹里的小箭头
      },
      pathNavigatorStyle: {
        // 已经行驶的轨迹
        initRotateDegree: 0,
        width: 16,
        height: 16,
        autoRotate: false,
        lineJoin: "round",
        content: "defaultPathNavigator",
        fillStyle: "#087EC4",
        strokeStyle: "#116394",
        lineWidth: 1,
        pathLinePassedStyle: {
          lineWidth: 7.5,
          strokeStyle: "#52c41a",
          borderWidth: 1,
          borderStyle: "#eeeeee",
          dirArrowStyle: true,
        },
      },
      pathTolerance: 10,
      pathLineHoverStyle: {
        strokeStyle: "#52c41a",
      },
    },
  });
};

// 停留点
export const addStopMarker = (map, label, img, lnglat, addVal, callback) => {
  const marker = new AMap.Marker({
    map,
    label,
    icon: new AMap.Icon({
      size: new AMap.Size(32, 40), // 图标尺寸
      image: img,
      imageSize: new AMap.Size(32, 40), // 根据所设置的大小拉伸或压缩图片
    }),
    position: lnglat,
    offset: new AMap.Pixel(-11, -38),
    ...addVal,
  });
  map?.add(marker);
  callback && marker.on("click", callback);
  return marker;
};

/**
 * 添加多边形覆盖物
 * @param {Map} GMap 地图实例
 * @param {Array} polygonArr 经纬度Array.[]
 * @returns 多边形覆盖物实例
 */
export const addpolygon = (GMap, polygonArr, colorOptions) => {
  const polygon = new AMap.Polygon({
    path: polygonArr, // 设置多边形边界路径
    strokeColor: "#FF33FF", // 线颜色
    strokeOpacity: 0.2, // 线透明度
    strokeWeight: 3, // 线宽
    fillColor: "#1791fc", // 填充色
    fillOpacity: 0.35, // 填充透明度
    ...colorOptions,
  });
  GMap?.add([polygon]);
  return polygon;
};

// 添加多边形覆盖物
export const addPolygons = (map, path, id, obj, cont, isRandom = true) => {
  const polygon = new AMap.Polygon({
    path,
    id,
    cursor: "pointer",
    ...obj,
    strokeColor: isRandom ? getRandomColor() : "#ccebc5", // 线颜色
    fillColor: isRandom ? getRandomColor() : "#2b8cbe", // 填充色
  });
  map.add(polygon);
  polygon.on("mouseover", (e) => {
    const { lng, lat } = e.lnglat;
    const infoWindow = addPolygonInfoWindow(cont);
    setTimeout(() => {
      infoWindow.open(map, [lng, lat]);
    }, 200);
  });
  polygon.on("mouseout", () => {
    setTimeout(() => {
      map.clearInfoWindow();
    }, 200);
  });
  return polygon;
};

// 添加设施的图标
export const addFacilityMarker = (
  map,
  label,
  img,
  lnglat,
  addVal,
  callback
) => {
  const marker = new AMap.Marker({
    map,
    label,
    icon: new AMap.Icon({
      size: new AMap.Size(40, 40), // 图标尺寸
      image: img, // Icon的图像
      imageSize: new AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
    }),
    position: lnglat,
    offset: new AMap.Pixel(-11, -38),
    ...addVal,
  });
  callback && marker.on("click", callback);
  return marker;
};

/**
 * 转成高德坐标: 支持批量传入[[],[],...]，返回格式等同
 * 1. 地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
 * 2. 火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。
 * 3. 百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。
 * @param {Array} lnglat 需要转换的坐标，可以批量传入
 * @param {String} type 需要转换的坐标类型
 * @returns Promise：Array.<LngLat>
 */
export const convertFrom = (lnglat, type) => {
  return new Promise((resolve, reject) => {
    AMap.convertFrom(lnglat, type, function (status, result) {
      if (result?.info === "ok") {
        resolve(result.locations);
      } else {
        reject({ status, result });
      }
    });
  });
};

/**
 * 定位中心点并设置缩放
 * @param {Map} map 地图实例
 * @param {Number} zoom 缩放等级
 * @param {Array} lnglat 经纬度
 * @param {Boolean} immed 是否需要过渡动画
 * @param {Number} duration 延时毫秒
 */
export const setCenter = (map, zoom, lnglat, immed = false, duration = 0) => {
  map.setZoomAndCenter(zoom, lnglat, immed, duration);
};

/**
 * 添加自定义折线
 * @param {Map} map 地图实例
 * @param {Array} path 经纬度Array.[]
 * @returns 折线实例
 */
export const addPolyline = (map, path) => {
  const polyline = new AMap.Polyline({
    path: path, // 设置线覆盖物路径
    showDir: true,
    strokeColor: "#3366bb", // 线颜色
    strokeWeight: 10, // 线宽
  });
  map.add([polyline]);
  return polyline;
};

export const markerCluster = (map, points) => {
  return new AMap.MarkerClusterer(
    map, // 地图实例
    points // 海量点数据 [{lnglat: ["108.939621", "34.343147"] },...]
  );

  // 使用
  const arr = [];
  const temp = item.positionAmap.split(",");
  arr.push({ lnglat: [+temp[0], +temp[1]], ...item });
  const cluster = markerCluster(GMap, arr);
  cluster.renderMarker = (option) => {
    const content = `
      <img style="width: 35px;height: 48px" src="${
        imgList[option.data[0].postCode]
      }" />
    `;
    option.marker.setContent(content);
    option.marker.setOffset(new AMap.Pixel(-11, -38));
    option.marker.setExtData({ ...option.data[0] });
    option.marker.setTitle(option.data[0].name);
    option.marker.setLabel({
      content: `
        <div style="">
          ${option.data[0].name}
        </div>
      `,
    });
  };
};
